<template>
  <!-- <el-row type="flex" justify="left">
    <el-col :span="12">
      <el-form :model="form" ref="ruleForm" label-width="100px" size="small">
        <el-divider content-position="left">基本信息</el-divider>
        <el-form-item label="服务名称">
          <el-input v-model="form.value1" style="width: 215px"></el-input>
        </el-form-item>
        <el-form-item label="服务类型">
          <el-select v-model="form.value2" placeholder="服务类型">
            <el-option label="地图服务" value="1"></el-option>
            <el-option label="数据服务" value="2"></el-option>
            <el-option label="三维服务" value="3"></el-option>
            <el-option label="影像服务" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-select v-model="form.value5" placeholder="所属部门">
            <el-option label="部门1" value="1"></el-option>
            <el-option label="部门2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属专题">
          <el-select v-model="form.value6" placeholder="所属专题">
            <el-option label="专题1" value="1"></el-option>
            <el-option label="专题2" value="2"></el-option>
            <el-option label="专题3" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词">
          <el-tag
            :key="tag"
            v-for="tag in form.value11"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ New Tag</el-button
          >
        </el-form-item>
        <el-form-item label="服务描述">
          <el-input
            type="textarea"
            v-model="form.value7"
            style="width: 215px"
          ></el-input>
        </el-form-item>
        <el-divider content-position="left">权限设置</el-divider>
        <el-form-item label="开放限制">
          <el-radio-group v-model="form.value3">
            <el-radio label="1">完全开放</el-radio>
            <el-radio label="2">有条件开放</el-radio>
            <el-radio label="3">不开放</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="下载限制">
          <el-radio-group v-model="form.value4">
            <el-radio label="1">无限制</el-radio>
            <el-radio label="2">有条件下载</el-radio>
            <el-radio label="3">不允许下载</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider content-position="left">资源文件设置</el-divider>
        <el-form-item label="存放方式">
          <el-radio-group v-model="form.value8">
            <el-radio label="1">本地资源</el-radio>
            <el-radio label="2">外部资源</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="'1' === form.value8">
          <el-form-item label="资源上传">
            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过500 MB
              </div>
            </el-upload>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="预览地址">
            <el-input v-model="form.value9" style="width: 215px">
              <template slot="prepend">Http://</template>
            </el-input>
          </el-form-item>
          <el-form-item label="API地址">
            <el-input v-model="form.value10" style="width: 215px">
              <template slot="prepend">Http://</template>
            </el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary">创建</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row> -->
</template>

<script>
/**
 *{ 服务管理=创建服务 }
 * @param:
 * @author: 宋康
 * @DateTime: 2022/7/5
 */
// export default {
//   name: "ServiceManageCreate",
//   data() {
//     return {
//       form: {
//         value1: "",
//         value2: "3",
//         value3: "3",
//         value4: "3",
//         value5: "",
//         value6: "",
//         value7: "",
//         value8: "1",
//         value9: "",
//         value10: "",
//         value11: [],
//       },
//       inputVisible: false,
//       inputValue: "",
//     };
//   },
//   methods: {
//     handleClose(tag) {
//       this.form.value11.splice(this.form.value11.indexOf(tag), 1);
//     },
//     showInput() {
//       this.inputVisible = true;
//       this.$nextTick((_) => {
//         this.$refs["saveTagInput"].$refs.input.focus();
//       });
//     },
//     handleInputConfirm() {
//       let inputValue = this.inputValue;
//       if (inputValue) {
//         this.form.value11.push(inputValue);
//       }
//       this.inputVisible = false;
//       this.inputValue = "";
//     },
//   },
// };
</script>

<style lang="scss" scoped>
// .el-tag + .el-tag {
//   margin-left: 10px;
// }

// .button-new-tag {
//   margin-left: 10px;
//   height: 32px;
//   line-height: 30px;
//   padding-top: 0;
//   padding-bottom: 0;
// }

// .input-new-tag {
//   width: 90px;
//   margin-left: 10px;
//   vertical-align: bottom;
// }
</style>



<template>
  <el-row type="flex" justify="left">
    <el-col :span="12">
      <el-form :model="form" ref="ruleForm" label-width="100px" size="small">
        <el-divider content-position="left">基本信息</el-divider>
        <el-form-item label="服务url">
          <el-input v-model="form.valueurl" style="width: 215px"></el-input>
        </el-form-item>
        <el-form-item label="服务名称">
          <el-input v-model="form.value1" style="width: 215px"></el-input>
        </el-form-item>
        <el-form-item label="服务类型">
          <el-select v-model="form.value2" placeholder="服务类型">
            <el-option label="地图服务" value="1"></el-option>
            <el-option label="数据服务" value="2"></el-option>
            <el-option label="三维服务" value="3"></el-option>
            <el-option label="影像服务" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-select v-model="form.value5" placeholder="所属部门">
            <el-option label="部门1" value="1"></el-option>
            <el-option label="部门2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属专题">
          <el-select v-model="form.value6" placeholder="所属专题">
            <el-option label="专题1" value="1"></el-option>
            <el-option label="专题2" value="2"></el-option>
            <el-option label="专题3" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词">
          <el-tag
            :key="tag"
            v-for="tag in form.value11"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ New Tag</el-button
          >
        </el-form-item>
        <el-form-item label="服务描述">
          <el-input
            type="textarea"
            v-model="form.value7"
            style="width: 215px"
          ></el-input>
        </el-form-item>
        <el-form-item label="覆盖范围">
          <el-select v-model="form.value12" placeholder="覆盖范围">
            <el-option label="全球" value="1"></el-option>
            <el-option label="市" value="2"></el-option>
            <el-option label="区县" value="3"></el-option>
            <el-option label="乡镇" value="4"></el-option>
            <el-option label="村" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据范围">
          <div>
            左上角经度：
            <el-input
              type="input"
              v-model="form.xyz"
              style="width: 215px"
            ></el-input>
          </div>
          <div>
            左上角纬度：
            <el-input
              type="input"
              v-model="form.xyz"
              style="width: 215px"
            ></el-input>
          </div>
          <div>
            右上角经度：
            <el-input
              type="input"
              v-model="form.xyz"
              style="width: 215px"
            ></el-input>
          </div>
          <div>
            右上角纬度：
            <el-input
              type="input"
              v-model="form.xyz"
              style="width: 215px"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="坐标系">
          <el-input
            type="input"
            v-model="form.valueCSYS"
            style="width: 215px"
          ></el-input>
        </el-form-item>
        <el-form-item label="投影类型">
          <el-select v-model="form.value12" placeholder="投影类型">
            <el-option label="1Web墨卡托" value="1"></el-option>
            <el-option label="2Web墨卡托" value="2"></el-option>
            <el-option label="3Web墨卡托" value="3"></el-option>
            <el-option label="4Web墨卡托" value="4"></el-option>
            <el-option label="5Web墨卡托" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker
            v-model="form.time"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="上次更新时间">
          <el-input
            type="input"
            v-model="form.lowtime"
            style="width: 215px"
          ></el-input>
        </el-form-item>
        <el-form-item label="发布机构">
          <el-input
            type="input"
            v-model="form.name"
            style="width: 215px"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            type="input"
            v-model="form.address"
            style="width: 215px"
          ></el-input>
        </el-form-item>
        <el-form-item label="网站">
          <el-input
            type="input"
            v-model="form.http"
            style="width: 215px"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input
            type="input"
            v-model="form.people"
            style="width: 215px"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input
            type="input"
            v-model="form.phone"
            style="width: 215px"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人邮箱">
          <el-input
            type="input"
            v-model="form.email"
            style="width: 215px"
          ></el-input>
        </el-form-item>

        <el-divider content-position="left">权限设置</el-divider>
        <el-form-item label="开放限制">
          <el-radio-group v-model="form.value3">
            <el-radio label="1">完全开放</el-radio>
            <el-radio label="2">有条件开放</el-radio>
            <el-radio label="3">不开放</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="下载限制">
          <el-radio-group v-model="form.value4">
            <el-radio label="1">无限制</el-radio>
            <el-radio label="2">有条件下载</el-radio>
            <el-radio label="3">不允许下载</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider content-position="left">资源文件设置</el-divider>
        <el-form-item label="存放方式">
          <el-radio-group v-model="form.value8">
            <el-radio label="1">本地资源</el-radio>
            <el-radio label="2">外部资源</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="'1' === form.value8">
          <el-form-item label="资源上传" style="width: 200%">
            <el-upload
              class="upload-demo"
              drag
              multiple
              action="https://jsonplaceholder.typicode.com/posts/"
              style="float: left; margin-right: 50px"
              :before-upload="beforeimg"
              :on-success="success"
              :on-remove="deleteimg"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div ref="tip" class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过500 MB
              </div>
            </el-upload>
            <div class="Preview" v-if="showup">
              <img alt="" class="my-img-d" :src="fileList" />
            </div>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="预览地址">
            <el-input v-model="form.value9" style="width: 215px">
              <template slot="prepend">Http://</template>
            </el-input>
          </el-form-item>
          <el-form-item label="API地址">
            <el-input v-model="form.value10" style="width: 215px">
              <template slot="prepend">Http://</template>
            </el-input>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button type="primary">创建</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
/**
 *{ 服务管理=创建服务 }
 * @param:
 * @author:
 * @DateTime: 2022/7/5
 */
export default {
  name: "ServiceManageCreate",
  data() {
    return {
      form: {
        value1: "",
        value2: "3",
        value3: "3",
        value4: "3",
        value5: "",
        value6: "",
        value7: "",
        value8: "1",
        value9: "",
        value10: "",
        value11: [],
        value12: "1",
        valueurl: "",
        valueCSYS: "",
        time: "",
        lowtime: "",
        xyz: "",
        name: "",
        address: "",
        http: "",
        people: "",
        phone: "",
        email: "",
      },
      fileList: [],
      showup: false,
      inputVisible: false,
      inputValue: "",
    };
  },
  methods: {
    handleClose(tag) {
      this.form.value11.splice(this.form.value11.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs["saveTagInput"].$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.form.value11.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    beforeimg(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt5M = file.size / 1024 / 1024 < 500;
      if (!isJPG && !isPNG) {
        this.$message.error("文件格式错误，只能是 JPG/PNG 格式!");
      }
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 500MB!");
      }
      return (isJPG || isPNG) && isLt5M;
    },
    success(res, file, fileList) {
      this.$refs.tip.innerHTML = "上传成功";
      console.log(file);
      this.fileList = URL.createObjectURL(file.raw);
      this.showup = true;
    },
    deleteimg() {
      this.showup = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.Preview {
  float: left;

  // margin-top: -50px;
  .my-img-d {
    width: 100%;
    height: 100%;
    padding: 10px;
    border: 2px solid #8f8e8e;
  }
}
</style>